<template>
	<view>
		<!-- 居中弹出 -->
		<gui-popup ref="guipopup" width="600rpx">
			<view class="gui-relative">
				<view class="title f28 c333">
					福利待遇
				</view>
				<view class="input_box">
					<input type="text" v-model="inputVal" class="bai-input" placeholder="请输入(最多6个字符)" />
				</view>
				<view class="btn_warp gui-flex">
					<view class="btn cel" @tap="close">
						取消
					</view>
					<view class="btn" @tap="confirm">
						确定
					</view>
				</view>
			</view>
		</gui-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue'
	const emit = defineEmits(['confirm'])
	const guipopup = ref(null)
	const inputVal = ref('')

	const open = () => {
		guipopup.value.open();
	}

	const close = () => {
		inputVal.value = '';
		guipopup.value.close();
	}

	const confirm = () => {
		console.log(inputVal.value);
		if (!inputVal.value) {
			uni.showToast({
				title: '内容不可为空',
				icon: 'none'
			})
			return;
		}
		emit('confirm', {
			value: inputVal.value
		})
		close();
	}

	// 抛出函数
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.gui-relative {
		position: relative;
		width: 600rpx;
		height: 360rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.title {
		box-sizing: border-box;
		padding: 40rpx 20rpx 20rpx 20rpx;
		text-align: center;
	}

	.input_box {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.bai-input {
		padding: 20rpx 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 14rpx;
	}

	.btn_warp {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80rpx;
		width: 100%;
		border-top: 1rpx solid #efefef;

		.btn {
			width: 50%;
			height: 100%;

			&.cel {
				background: #fff;
				color: #666666;
			}
		}
	}
</style>